<template>
  <div v-if="goods" id="snapshot">
    <bread-nav :goods="goods"/>
    <div class="content">
      <div class="inner-content">
        <!--商品相册-->
        <goods-zoom :images="goods.gallery_list" :spec-img="specImage"/>
        <!--商品信息【包括规格】-->
        <goods-info
          :goods="goods"
          :orderprice="goodsPrice"
          :promotions="promotions"
          :snapshot="true"
          @spec-img-change="(img) => { this.specImage = img }"
        />
      </div>
    </div>
    <div class="details">
      <div class="inner w">
        <!--店铺标签商品推荐-->
        <goods-tags :shop-id="goods.seller_id"/>
        <div class="detail-container">
          <div class="detail-tabs">
            <div
              v-for="tab in tabs"
              :key="tab.title"
              :class="['item-tab', tab.active && 'active']"
              @click="handleClickTabItem(tab)"
            >{{ tab.title }}</div>
          </div>
          <div class="detail-content">
            <div v-show="curTab === '商品详情'" class="intro-detail" v-html="goods.intro"></div>
            <!--商品参数-->
            <goods-params v-show="curTab === '规格参数'" :goods-params="goods.param_list"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import * as APT_Trade from '@/api/trade'
import * as GoodsComponents from './components'
import Storage from '@/utils/storage'
import { Pagination } from 'element-ui'

Vue.use(Pagination)
export default {
  name: 'snapshot',
  head() {
    const { goods, site } = this
    return {
      title: `${goods.goods_name || '商品详情'}-${site.title}`
    }
  },
  components: GoodsComponents,
  data() {
    return {
      goods: '',
      goodsPrice: '',
      /** 规格图片 */
      specImage: '',
      tabs: ['商品详情', '规格参数'].map((item, index) => ({ title: item, active: index === 0 })),
      curTab: '商品详情',
      promotions: []
    }
  },
  mounted() {
    const { id } = this.$route.query
    const { owner } = this.$route.query
    if (owner === 'BUYER') {
      APT_Trade.getSnapshot(id).then(response => {
        response.goods_name = response.name
        this.goods = response
        this.promotions = response.promotion_list// || JSON.parse(response.promotion_json)
        this.goodsPrice = response.price
      })
    } else if (owner === 'SELLER') {
      Storage.setItem('access_token', this.$route.query.token)
      Storage.setItem('refresh_token', this.$route.query.token)
      APT_Trade.getSellerSnapshot(id).then(response => {
        response.goods_name = response.name
        this.goods = response
        this.promotions = response.promotion_list// || JSON.parse(response.promotion_json)
        this.goodsPrice = response.price
      })
    }
  },
  methods: {
    /** 商品详情tab点击事件 */
    handleClickTabItem(tab) {
      this.curTab = tab.title
      this.tabs.map(item => {
        item.active = tab === item
        return item
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/color";
.content {
  width: 1210px;
  min-height: 500px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 2px 5px #ccc;
  padding: 40px 40px 12px 40px;
  box-sizing: border-box;
  .inner-content {
    display: flex;
    justify-content: space-between;
  }
}
.collect-goods-btn {
  margin-left: 20px;
  background-image: url("");
  &.collected {
    background-image: url("");
  }
}
.details {
  margin: 50px 0;
  .inner {
    display: flex;
    justify-content: space-between;
  }
  $dc_width: 1210px - 200px - 30px;
  .detail-container {
    width: $dc_width;
    min-height: 100px;
  }
  .detail-tabs {
    display: flex;
    width: 100%;
    height: 36px;
    .item-tab {
      width: ($dc_width - 4px) / 2;
      height: 36px;
      background-color: #333;
      border-right: 1px solid #fff;
      line-height: 36px;
      color: #fff;
      text-align: center;
      cursor: pointer;
      transition: all .2s ease;
      &:hover, &.active {
        background-color: $color-main
      }
      &:nth-child(5) {
        border-right: 0
      }
    }
  }
  .detail-content {
    padding-top: 10px;
    overflow: hidden;
  }
  .intro-detail {
    text-align: center
  }
}
/deep/ .el-pagination {
  margin-top: 20px;
  text-align: right;
}
.goods-auth {
  text-align: center;
  padding: 50px 0;
  .goods-auth-btns {
    margin-top: 20px;
  }
  a {
    display: inline-block;
    min-width: 100px;
    height: 20px;
    background-color: $color-main;
    color: #fff;
    padding: 10px 20px;
    margin-right: 20px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 600;
    transition: background-color ease .2s;
    &:hover {
      background-color: lighten($color-main, 15%);
    }
  }
}
</style>
